<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <div>
      <!-- 图片，用来展示用户选择的头像 -->
      <img :src="avatar" alt="" class="preview" v-if="avatar" />
        <!-- 默认图片 -->
      <img src="../../../assets/images/avatar.jpg" alt="" class="preview" v-else />

        
      <!-- 按钮区域 -->
      <div class="btn-box"> 
         <!-- 添加文件 选择框 --> 
          <input type="file" accept="image/*" 
          style="display:none" ref="iptFile"
          @change="onFileChange"
          >
        <el-button type="primary" icon="el-icon-plus" @click="$refs.iptFile.click()">选择图片</el-button>
                                      <!-- avatar 中存取数据 可以上传头像  false 取消禁用按钮  -->
        <el-button type="success" icon="el-icon-upload" :disabled="avatar==='' " @click="updateAvatar">上传头像</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'UserAvatar',
  data () {
    return {
      avatar:''
    }
  },
  methods: {
     //上传头像
   async updateAvatar(){
       const {data:res}= await this.$http.patch('/my/update/avatar',{avatar:this.avatar})
         console.log(res)
       if(res.code!=0)  return   this.$message.error(res.message)
       //上传成功
        this.$message.success(res.message)
       //清空  avatar
       this.avatar=''
       //重新渲染页面
       this.$store.dispatch('initUserInfo')
    },
     //选择图片
     onFileChange(e){
       //获取用户选择的文件列表
        const files=e.target.files
        console.log(files)
        if(files.length!==0){
          //选择图片
          console.log(files[0])
          //创建 filesReader对象将文件 读取到reader中 转化 base64
          let reader=new FileReader() 
          console.log(reader,'创建的filesReader对象')
           reader.readAsDataURL(files[0]) //读取图片  
            // 读取图片完成后  触发onload事件  事件处理函数 this指向事件源 修改为箭头函数
            reader.addEventListener('load',()=>{
               this.avatar= reader.result  //读取完成 拿到base64字符
            }) 
           //
        }else{
          // console.log('没有选择图片')
          this.avatar=''
        }
     }
  }
}
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 10px;
}
.preview {
  object-fit: cover;
  width: 350px;
  height: 350px;
}
</style>